<script>
import LivePlayer from '@liveqing/liveplayer'
import cache from "@/plugins/cache";
import {getChannelNameByChannelId, selectAllDevice, selectAllLabel} from '@/api/device/device'
import {devPlayer} from '@/api/device/device'
import Zzh_webSocket from "@/components/webSocket/webSocket.vue";
import {getOneWarning, getWarningTop, getWeb} from "@/api/warning/wraning";
import {selectAllAlgor} from "@/api/algor/algor";

export default {
  name: "overview",
  components:{
    Zzh_webSocket,
    LivePlayer
  },
  created() {
    this.video.watermark =cache.local.getUserName();
    this.getDeviceLabel();
    this.getWarningTop();
  },
  data(){
    return {
      video:{
        streamUrl:undefined,
        watermark:"",
        deviceList:[],
        choseDevice:undefined
      },
      devNameList:[],
      algorNameList:[],
      warningList:[],
    };
  },
  methods: {
    formatTimestamp(timestamp) {
      const date = new Date(timestamp * 1000); // 将十位数的秒级时间戳转换为毫秒级
      return date.toISOString(); // 返回ISO格式的日期和时间字符串
    },
    convertISOToCustomFormat(isoString) {
      const date = new Date(isoString);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    timestampToDateString(timestamp) {
      console.log(timestamp)
      const formattedDate = this.formatTimestamp(timestamp);
      const dateString = this.convertISOToCustomFormat(formattedDate);
      console.log(formattedDate); // 输出格式化的日期时间字符串
      // let year = date.getFullYear(); // 获取年份
      // let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并补零
      // let day = date.getDate().toString().padStart(2, '0'); // 获取日期并补零
      // return year.toString() + month + day; // 拼接为 yyyymmdd 格式
      return dateString
    },
    getChannelName(imgbase64) {

    },
    getDeviceLabel(){
      selectAllLabel().then(resp=>{
        this.video.deviceList = resp.data
      })
    },
    getDevicePic(val){
      if (val){
        devPlayer(val).then(resp=>{
          this.video.streamUrl = resp.msg
        })
      }

    },
    clearDevicePlayer(){
      this.$refs.livePlayer.pause();
      this.video.streamUrl = undefined
    },
    warningEvent(res){
      // this.warningList.unshift(JSON.parse(res))
      // this.getChannelName(this.warningList[0].imgbase64)
      let data = {
        "imgbase64":JSON.parse(res).imgbase64
      };
      getWeb(data).then(res=>{
        this.warningList.unshift(res.data)
        if(this.warningList.length>100){
          this.warningList.pop();
        }
      })
    },
    getWarningTop(){
      getWarningTop({}).then(res=>{
        this.warningList=res.data

      })
    }
  }
}
</script>

<template>
  <div id="app-video">
    <el-row>
      <el-col :span="16">
        <div class="viewcont">
          <el-row type="flex" justify="center">
            <el-col :span="24">
              <div class="breadcrumb">
                <el-select class="inputem" v-model="video.choseDevice" @change="getDevicePic" @clear="clearDevicePlayer" clearable  placeholder="预览通道：请选择通道">
                  <el-option
                      v-for="dict in video.deviceList"
                      :key="dict.channelId"
                      :label="dict.name"
                      :value="dict.channelId"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-col :span="24">
            <div class="video-container">
              <LivePlayer ref="livePlayer" style="width: 87%;box-shadow: -10px 7px 3px 1px rgba(0, 0, 0, 0.2);  " :videoUrl="video.streamUrl" fluent autoplay live stretch timeout:20 :water-mark="video.watermark"></LivePlayer>
            </div>
          </el-col>
          <!--          <el-col :span="24">-->
          <!--            <div class="photobox">-->
          <!--              <el-button type="text" class="button" >抓拍历史-->
          <!--                <i class="el-icon-d-arrow-right"></i>-->
          <!--              </el-button>-->
          <!--            </div>-->
          <!--          </el-col>-->
        </div>
      </el-col>
      <el-col :span="8">
        <el-row type="flex" justify="end">
          <el-col :span="4">
            <div class="alter-list">
              <el-button type="text" class="button" >告警预览
                <i class="el-icon-d-arrow-right"></i>
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <zzh_web-socket @warningEvent="warningEvent"></zzh_web-socket>
            <div style="overflow: auto;height: 83vh;">
              <div  v-for="(o, index) in warningList" :key="o.id">
                <el-card :body-style="{ padding: '0px'}" class="cardbox" >
                  <div >
                    <el-row type="flex" justify="space-between">
                      <el-col :span="12">
                        <div style="width: 100%">
                          <img :src="o.imgbase64" alt="" style="object-fit: fill; width: 85%;padding: 5px;">
                        </div>
                      </el-col>
                      <el-col :span="10">
                        <div style="align-content: center;height: 100%;font-size: 14px;">
                          <span>类&ensp;型：{{o.algorName}}</span><br>
                          <span>时 间：{{timestampToDateString(o.time)}}</span><br>
                          <span>设 备：{{o.name}}</span><br>
                          <!--                          <span>分 数：{{ o.score }}</span><br>-->
                        </div>
                      </el-col>
                      <!--                      <el-col :span="5">-->
                      <!--                        <div style="align-content: center;height: 100%;text-align: center;">-->
                      <!--                          <el-button type="text">-->
                      <!--                            <img src="@/assets/ptz/photoicon.png" alt="" style="width:30%;">-->
                      <!--                          </el-button><br>-->
                      <!--                          <el-button type="text">-->
                      <!--                            <img src="@/assets/ptz/videoicon.png" alt="" style="width:30%;">-->
                      <!--                          </el-button>-->
                      <!--                        </div>-->
                      <!--                      </el-col>-->
                      <div style="float: right;">
                        <!-- 告警事件未处理的标签 -->
                        <img src="@/assets/ptz/mark1.png" alt="" width="100%" style="float: right">
                      </div>
                    </el-row>
                  </div>

                </el-card>
              </div>
            </div>

          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>

.overview{
  display: flex;
  width: 100%;
//height: 100vh; /* 可根据需要调整高度 */
  padding: 10px 30px;
  height: 100%;
  color: #fff;
  box-sizing: border-box;
}
.el-row{
  /* margin-top: 20px; */
}
.viewcont {
  /* display: flex;
  flex-direction: column;
  flex: 6;
  height: 100%;
  overflow: hidden; */
  background-image: url('@/assets/img/videobg3.png');
  background-size: 97% 97%;
  /* background-color: red; */
  height: 89vh;
  text-align: end;
  align-content: center;
  background-repeat:no-repeat;
  background-position:center;
  /* padding: 20px; */
}

.alter-list{
  /* flex: 3; */
}

.breadcrumb{
  /* flex: 1; */
  /* background-color: aqua; */
  padding-right: 30px;
  padding-top: 5px;
}

.video-container{
  /* flex: 6; */
  -webkit-display:flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  padding-right: 5px;
  margin-top: -6px;
}

.cap-wrapper{
  /* flex: 3; */
}
.inputem{
  margin-top: -10px;
}

.inputem /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) ;
  color: #000;
  /* border:1px solid #1A3B5B; */
  border: none;
}
/* .inputem /deep/ .el-input__inner:focus{

}
.inputem /deep/ .el-input__inner:hover{

} */

.cardbox{
  height: 30%;
  width: 95%;
  margin-bottom: 10px;
}
.photobox{
  /* background-color: aqua; */
  width: 95%;
  height: 120px;
  margin-left: 20px;
  /* margin-top: -10px; */
}
.button{
  color: #000;

}
</style>

